<script setup lang="tsx">
import type { IState } from './type'
import useMicroStore from '@apps/_share/store/micro'
import { RouteName } from '@auth/enums'
import {
  columns,
  schemas,
} from './config'

defineOptions({ name: RouteName.userAdmin })

const state = reactive<IState>({
  schemas,
  tableData: [
    {
      id: '1',
      projectName: 'A公司',
      projectCode: 'LB123456',
      typeName: '-',
      status: 1,
      statusName: '开启',
      createName: '五老星1号',
      createTime: '2024-10-24 12:00:00',
      modifyName: '五老星2号',
      modifyTime: '2024-10-25 10:10:20',
      apps: [{
        id: 1,
        name: '权限中心',
        code: 'auth',
      }, {
        id: 2,
        name: '配置中心',
        code: 'config',
      }, {
        id: 3,
        name: '翻译中心',
        code: 'translate',
      }],
    },
    {
      id: '2',
      projectName: 'B公司',
      projectCode: 'LB666666',
      typeName: '-',
      status: 1,
      statusName: '开启',
      createName: '五老星1号',
      createTime: '2024-10-24 12:00:00',
      modifyName: '五老星2号',
      modifyTime: '2024-10-25 10:10:20',
      apps: [{
        id: 1,
        name: '权限中心',
        code: 'auth',
      }, {
        id: 2,
        name: '配置中心',
        code: 'config',
      }, {
        id: 3,
        name: '翻译中心',
        code: 'translate',
      }],
    },
  ],
  currentRow: null,
  pagination: {
    page: 1,
    size: 20,
    total: 10,
  },
})

const { $t } = useMicroStore()

async function onSearch(model: any) {
  console.log({ model })
}

function onReset(model: any) {
  console.log({ model })
}

async function onAdd() {

}
</script>

<template>
  <UiPageListContainer>
    <template #search>
      <UiFormSearch
        :schemas="state.schemas"
        @reset="onReset"
        @search="onSearch"
      />
    </template>

    <template #operation>
      <ElSpace wrap>
        <BaseButton
          type="primary"
          @click="onAdd"
        >
          {{ $t('新增') }}
        </BaseButton>
      </ElSpace>
    </template>

    <template #table>
      <BaseTable
        row-key-prop="id"
        :columns="columns"
        :data="state.tableData"
      >
        <template #domains="{ row }">
          <div
            v-for="domain in row.domains"
            :key="domain.env"
          >
            <span>{{ domain.envName }}: </span>
            <span>{{ domain.url }}</span>
          </div>
        </template>

        <template #operation>
          <ElSpace
            wrap
            :size="16"
            class="pt-8px pb-8px"
          >
            <ElButton
              link
              type="primary"
              size="small"
            >
              {{ $t('详情') }}
            </ElButton>

            <ElButton
              link
              type="primary"
              size="small"
            >
              {{ $t('编辑') }}
            </ElButton>

            <ElButton
              link
              type="primary"
              size="small"
            >
              {{ $t('删除') }}
            </ElButton>
          </ElSpace>
        </template>
      </BaseTable>
    </template>

    <template #pagination>
      <BasePagination
        v-if="state.pagination.total > 0"
        v-model:page="state.pagination.page"
        v-model:size="state.pagination.size"
        :total="state.pagination.total"
      />
    </template>
  </UiPageListContainer>
</template>
